@import './public.scss';

body {
  overflow-x: hidden;
  background-color: #f0f0f0;
}

// 1.隐藏topList
.tabBox {
  // .topCats {
  //   &:hover .topList {
  //     display: block;
  //   }
  // }

  .topList {
    display: none;
  }
}

// 2.商品详情
.detail {
  min-height: 800px;
  background-color: #fff;

  .detail_top {
    height: 68px;
    line-height: 68px;
    border-bottom: 2px solid #999;
  }

  .detail_center {
    padding-top: 20px;
    width: 100%;
    min-height: 562px;
    display: flex;
    position: relative;

    .box {
      width: 1100px;
      height: 488px;
      display: flex;
      position: absolute;
      left: 0;
      top: 0;

      .left {
        width: 400px;
        height: 488px;

        .top {
          width: 402px;
          height: 402px;
          // background-color: red;
          border: 1px solid #eee;
          position: relative;
          left: 0;
          top: 0;

          .pic {
            width: 400px;
            height: 400px;
          }

          .cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.2);
            display: none;
          }
        }

        .image {
          display: flex;

          li {
            width: 70px;
            height: 70px;
            border: 1px solid #999;
            margin: 8px 14px 0 14px;

            img {
              display: block;
              width: 68px;
              height: 68px;
            }
          }
        }

      }

      .right {
        width: 400px;
        height: 400px;
        border: 1px solid #eee;
        margin-left: 20px;
        position: relative;
        overflow: hidden;
        display: none;
        background-color: #fff;

        .picOne {
          position: absolute;
          width: 800px;
          height: 800px;


        }


      }
    }

    .pInfo {
      margin-left: 450px;
      width: 658px;
      position: relative;


      dt {
        margin-top: 20px;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 18px;
        line-height: 26px;
        color: #333;
      }

      .sell {
        width: 100%;
        border: 1px dotted #ddd;
        padding-bottom: 4px;
        height: 40px;
        line-height: 40px;
        margin-top: 30px;

        .sellOne {
          margin: 10px 0;
          font-size: 18px;
        }

        .sellTwo {
          font-size: 26px;
          color: #e31436;
          font-weight: bold;
          margin-left: 20px;
        }


      }

      .fare {
        width: 100%;
        height: 28px;
        line-height: 28px;
        margin-top: 30px;

        span:nth-child(2) {
          margin: 0 20px;
        }
      }

      .meal {
        width: 100%;
        height: 30px;
        line-height: 28px;
        margin-top: 36px;

        span:nth-child(2) {
          display: inline-block;
          background-color: #fff;
          margin: 0 20px;
          height: 30px;
          border: 1px solid #ccc;
          text-align: center;
        }
      }

      .number {
        display: flex;
        margin-top: 40px;
        height: 30px;
        line-height: 30px;


        .line {
          border: 1px solid #ccc;
          height: 24px;
          width: 101px;
          margin-left: 20px;
          line-height: 0;

          .reduce {
            width: 22px;
            height: 22px;
            line-height: 22px;
            // user-select: none;
            border: none;
            border-right: 1px solid #ccc;
            cursor: pointer;

          }

          .add {
            width: 22px;
            height: 22px;
            // user-select: none;
            border: none;
            border-left: 1px solid #ccc;
            cursor: pointer;
          }

          input {
            width: 48px;
            text-align: center;
            height: 22px;
            line-height: 22px;
          }
        }
      }

      .cart {
        margin-top: 24px;

        .buy {
          width: 156px;
          height: 46px;
          border: 2px solid #d41c44;
          background-color: #ffeced;
          color: #d31b44;
          line-height: 46px;
          margin-right: 20px;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
        }

        .addCart {
          width: 156px;
          height: 46px;
          border: 2px solid #d41c44;
          background-color: #ffeced;
          color: #d31b44;
          line-height: 46px;
          margin-right: 20px;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
        }

      }

    }

  }
}